<%-- 
    Document   : index
    Created on : Feb 21, 2010, 10:32:10 AM
    Author     : ManowTangdud
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<html>
    <head>
        <title>jQuery-basics</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link type="text/css" rel="stylesheet" href="css/jqry.css">
        <link type="text/css" rel="stylesheet" href="css/jqry.slideshow.css">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
        <script src="js/jquery.tools.min.js" type="text/javascript"></script>
        <script src="js/jqry.slideshow.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("img[rel]").overlay();
                $("a").click(function(event){
                    alert("As you can see, the link no longer took you to jquery.com");
                    event.preventDefault();
                    $("a").removeClass("test");
                });
                $("a").addClass("test");
                $("#random").click(function(event){
                    $("#random").attr("src", "http://www.ins-en.com/images/top/slide-2.png");
                });
                //       $("a").click(function(event){
                //           event.preventDefault();
                //           $(this).hide("slow");
                //       });
            });

        </script>
    </head>
    <body>
        <a href="http://jquery.com/">jQuery</a><br>
        <img src="img/ss001_vocabtime_thumb.jpg" alt="Vocab Time thumb" rel="#ss01">
        <img src="img/ss002_vocab_exam-trans_ques_thumb.jpg" alt="Vocab Exam-Trans thumb" rel="#ss02">
        <div id="slideshow">
            <img src="http://www.ins-en.com/images/top/slide-1.png" alt="" class="active" />
            <img src="http://www.ins-en.com/images/top/slide-2.png" alt="" />
            <img src="http://www.ins-en.com/images/top/slide-3.png" alt="" />
            <img src="http://www.ins-en.com/images/top/slide-4.png" alt="" />
            <img src="http://www.ins-en.com/images/top/slide-5.png" alt="" />
            <img src="http://www.ins-en.com/images/top/slide-6.png" alt="" />
        </div>
        <img src="http://www.ins-en.com/images/top/slide-1.png" alt="" id="random"/>

        <!-- first overlay. id attribute matches our selector -->
        <div class="simple_overlay" id="ss01">

            <!-- large image -->
            <img src="img/ss001_vocabtime.jpg" alt="Vocab Time" />

            <!-- image details -->
            <div class="details">
                <h3>The Barcelona Pavilion</h3>

                <h4>Barcelona, Spain</h4>

                <p>The content ...</p>
            </div>

        </div>

        <!-- second overlay -->
        <div class="simple_overlay" id="ss02">

            <!-- large image -->
            <img src="img/ss002_vocab_exam-trans_ques.jpg" alt="Vocab Exam-Trans" />

            <!-- image details -->
            <div class="details">
                <h3>The Barcelona Pavilion</h3>

                <h4>Barcelona, Spain</h4>

                <p>The content ...</p>
            </div>

        </div>
    </body>
</html>
